﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>看板</title>
<head>
	<th:block th:include="include :: header('新增通知公告')"/>
	<th:block th:include="include :: summernote-css"/>
	<th:block th:include="include :: nc"/>
</head>
<body>
<div id="loader"></div>
<script type="text/javascript">
	$('#loader').shCircleLoader({color: "#00deff"});
</script>
<!--Top Start!-->
<div class="scanboardWp animsition">
	<!--Main Start!-->
	<div id="main" class="wp clearfix">
		<div class="left">
			<!--今日文件数量-->
			<div class="item waybill">
				<div class="itemTit">
					<span class="border-yellow">今日文件数量</span>
				</div>
				<div class="itemCon itembg">
					<div id="ybzxt" class="progress" progress="0%">
						<h5 class="clearfix"><span>预报中心</span><i id="ybzx">0</i></h5>
						<div class="progressBar">
							<span></span>
						</div>
						<h5>0%</h5>
					</div>
					<div id="zjstt" class="progress" progress="0%">
						<h5 class="clearfix"><span>浙江省台</span><i id="zjst">0</i></h5>
						<div class="progressBar">
							<span></span>
						</div>
						<h5>0%</h5>
					</div>
					<div id="dhtqt" class="progress" progress="0%">
						<h5 class="clearfix"><span>东海区台</span><i id="dhtq">0</i></h5>
						<div class="progressBar">
							<span></span>
						</div>
						<h5>0%</h5>
					</div>
				</div>
			</div>

			<!--级别统计-->
			<div class="item">
				<div class="itemTit">
					<span class="border-green">今日上传级别统计</span>
				</div>
				<div class="itemCon">
					<ul class="listStyle">
						<li class="clearfix">
							<span>L0</span>
							<span><strong id="l0">0</strong>个</span>
						</li>
						<li class="clearfix">
							<span>L1</span>
							<span><strong id="l1">0</strong>个</span>
						</li>
						<li class="clearfix">
							<span>L2</span>
							<span><strong id="l2">0</strong>个</span>
						</li>
						<li class="clearfix">
							<span>L3</span>
							<span><strong id="l3">0</strong>个</span>
						</li>
						<li class="clearfix">
							<span>L4</span>
							<span><strong id="l4">0</strong>个</span>
						</li>
						<li class="clearfix">
							<span>L5</span>
							<span><strong id="l5">0</strong>个</span>
						</li>
					</ul>
				</div>
			</div>

			<!--饼状图统计-->
			<div class="item">
				<div class="itemTit">
					<span class="border-blue">今日饼状图统计</span>
				</div>
				<div class="itemCon itembg">

				</div>
				<div style="height: 250px;width: 300px">
					<div id="mytj" style="height: 250px"></div>
				</div>

			</div>
		</div>
<style>
	.box{
		margin: 35px; /* Optional space between divs */
		padding: 10px; /* Optional padding inside divs */
		border: 1px solid #a6a6a6; /* Optional border for visualization */
	}
	.gjj{
		height: 18%;width: 70%;display: flex;justify-content: center;align-items: center;background-color: #0c3e6e;color: #a6a6a6; /*#158bff已上传颜色*/
	}
	.tqj{
		height: 18%;width: 70%;display: flex;justify-content: center;align-items: center;background-color: #0c3e6e;color: #a6a6a6;
	}
	.lj{
		height: 13%;width: 70%;display: flex;justify-content: center;align-items: center;background-color: #0c3e6e;color: #a6a6a6;
	}
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
<script>
	function dj(){
		$(".gjj").css({"color":"#ffffff",
			"border":" 1px solid #ffffff",
			"background-color":"#158bff",
		})
		$(".gjj").html("国家级(已上传)")
	}
	function dj1(dj){
		if(dj==1){
			$("#tqj1").css({"color":"#ffffff",
				"border":" 1px solid #ffffff",
				"background-color":"#158bff",
			})
			$("#tqj1").html("预报中心(已上传)")
		}
		if(dj==2){
			$("#tqj2").css({"color":"#ffffff",
				"border":" 1px solid #ffffff",
				"background-color":"#158bff",
			})
			$("#tqj2").html("浙江省台(已上传)")
		}
		if(dj==3){
			$("#tqj3").css({"color":"#ffffff",
				"border":" 1px solid #ffffff",
				"background-color":"#158bff",
			})
			$("#tqj3").html("东海台区(已上传)")
		}
	}
function lj(lj){
	if(lj==1){
		$("#lj1").css({"color":"#ffffff",
			"border":" 1px solid #ffffff",
			"background-color":"#158bff",
		})
		$("#lj1").html("L0(已上传)")
	}
	if(lj==2){
		$("#lj2").css({"color":"#ffffff",
			"border":" 1px solid #ffffff",
			"background-color":"#158bff",
		})
		$("#lj2").html("L1(已上传)")
	}
	if(lj==3){
		$("#lj3").css({"color":"#ffffff",
			"border":" 1px solid #ffffff",
			"background-color":"#158bff",
		})
		$("#lj3").html("L2(已上传)")
	}
	if(lj==4){
		$("#lj4").css({"color":"#ffffff",
			"border":" 1px solid #ffffff",
			"background-color":"#158bff",
		})
		$("#lj4").html("L3(已上传)")
	}
	if(lj==5){
		$("#lj5").css({"color":"#ffffff",
			"border":" 1px solid #ffffff",
			"background-color":"#158bff",
		})
		$("#lj5").html("L4(已上传)")
	}
	if(lj==6){
		$("#lj6").css({"color":"#ffffff",
			"border":" 1px solid #ffffff",
			"background-color":"#158bff",
		})
		$("#lj6").html("L5(已上传)")
	}
}
	$(document).ready(function() {
		//获取时间
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth() + 1; // 月份从0开始，需要加1
		var day = date.getDate();
		// 在这里写你的代码，DOM就绪后就会执行
		console.log('页面加载完成！');
		$.ajax({
			url: '/product/nctj/getYandN',
			type: "POST",
			data:{
			kstime:year+"-"+month+"-"+day+" 00:00:00",
			jstime:year+"-"+month+"-"+day+" 23:59:59",
			},
			success: function (data) {
				//console.log(data)
				if(data.data.L0 == true){
					lj(1)//L0
					dj()//国家级
					dj1(1)//预报中心
				}
				if(data.data.L1 == true){
					lj(2)//L1
					dj()//国家级
					dj1(1)//预报中心
				}
				if(data.data.L2 == true){
					lj(3)//L2
					dj()//国家级
					dj1(1)//预报中心
				}
				if(data.data.L3 == true){
					lj(4)//L3
					dj()//国家级
					dj1(2)//浙江省台
				}
				if(data.data.L4 == true){
					lj(5)///L4
					dj()//国家级
					dj1(3)//东海台区
				}
				if(data.data.L5 == true){
					lj(6)//L5
					dj()//国家级
					dj1(3)//东海台区
				}
			}})
	});
</script>
		<div class="center">
			<div class="centerWp">
				<!--中间大地图-->
				<div class="mapContainer">
					<h1 style="font-size: 19px;color: antiquewhite;">今日监听</h1>
					<div style="height: 450px; display: flex;justify-content: center;align-items: center;" class="item"><!--这个id是底图 id="myMap"-->
						<div  style="height: 100%;width: 30%;">
							<div class="gjj box">国家级(未上传)</div>
							<div class="gjj box">国家级(未上传)</div>
							<div class="gjj box">国家级(未上传)</div>
						</div>
						<div style="height: 100%;width: 30%;">
							<div id="tqj1" class="tqj box">预报中心(未上传)</div>
							<div id="tqj2" class="tqj box">浙江省台(未上传)</div>
							<div id="tqj3" class="tqj box">东海台区(未上传)</div>
						</div>
						<div style="height: 100%;width: 30%;">
							<div id="lj1" class="lj box" style="margin: 10px">L0(未上传)</div>
							<div id="lj2" class="lj box" style="margin: 10px">L1(未上传)</div>
							<div id="lj3" class="lj box" style="margin: 10px">L2(未上传)</div>
							<div id="lj4" class="lj box" style="margin: 10px">L3(未上传)</div>
							<div id="lj5" class="lj box" style="margin: 10px">L4(未上传)</div>
							<div id="lj6" class="lj box" style="margin: 10px">L5(未上传)</div>
						</div>
					</div>
				</div>

				<!--月运单量统计图-->
				<div class="billChart">
					<div class="itemTit">
						<span class="border-blue">月文件量统计图</span>
					</div>
					<div id="myChart1"></div>
				</div>
			</div>
		</div>

		<div class="right">
			<!--总计文件数量-->
			<div class="item total itembg">
				<div class="itemTit">
					<span class="border-yellow">总计文件数量</span>
				</div>
				<div class="itemCon">
					<div class="totalNum"><strong id="totalNum">0</strong><span>个</span></div>
				</div>
			</div>

			<!--基本信息-->
			<div class="item basicInfo">
				<div class="itemTit">
					<span class="border-green">基本信息总量</span>
				</div>
				<div class="itemCon itembg">
					<div class="infoPie">
						<ul class="clearfix">
							<li class="color-yellow">
								<span class="border-yellow" id="indicator1">0</span>
								<p>预报中心</p>
							</li>
							<li class="color-green">
								<span class="border-green" id="indicator2">0</span>
								<p>浙江省台</p>
							</li>
							<li class="color-blue">
								<span class="border-blue" id="indicator3">0</span>
								<p>东海区台</p>
							</li>
						</ul>
						<div id="indicatorContainer"></div>
					</div>
				</div>
			</div>

			<!--文件状态-->
			<div class="item billState">
				<div class="itemTit">
					<span class="border-green">当天文件状态</span>
				</div>
				<div class="itemCon">
					<div class="StateBox">
						<div class="StateTit">
							<span>文件编号</span>
							<span>上传时间</span>
							<!--<span>满载率</span>-->
						</div>
						<div id="FontScroll">
							<ul id="tabledata">

								<!--	<li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="80%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="49%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="7%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="55%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="100%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="94%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="23%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="67%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="42%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="38%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span>ZC1712120023</span>
                                            <span>2小时15分</span>
                                            <span>
                                                    <div class="progress" progress="76%">
                                                        <div class="progressBar">
                                                            <span></span>
                                                        </div>
                                                        <h3><i><h4></h4></i></h3>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>-->
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--Main End!-->
</div>

<div class="filterbg"></div>
<div class="popup">
	<a href="javascript:;" class="popupClose"></a>
	<div class="summary">
		<div class="summaryTop">
			<div id="summaryPie1" class="summaryPie"></div>
			<div id="summaryPie2" class="summaryPie"></div>
			<div id="summaryPie3" class="summaryPie"></div>
		</div>
		<div class="summaryBottom">
			<div class="summaryBar">
				<div class="summaryTit">
					<img src="/nctj/images/tit1.png">
				</div>
				<div id="summaryBar"></div>
			</div>

			<div class="summaryLine">
				<div class="summaryTit">
					<img src="/nctj/images/tit2.png">
				</div>
				<div id="summaryLine"></div>
			</div>
		</div>
	</div>
</div>

<div class="carInfo">
	<a href="javascript:;" class="carClose"></a>
	<div class="infoBox">
		<div class="infoTop">
			<div class="infoTit">
				<img src="/nctj/images/tit3.png">
			</div>
		</div>
		<!--<div class="infoMain">
			<div class="infoLeft fl">
				<div class="topSearch">
					<form>
						<button></button>
						<input type="text" name="" placeholder="请输入车牌号搜索">
					</form>
				</div>
				<div class="carState">
					<h3>
						<span class="fl">车牌号码</span>
						<span class="fr">状态</span>
					</h3>
					<ul class="stateUl">
						<li>
							<p>粤A3456344</p>
							<span class="work">工作</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="nowork">休息</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="work">工作</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="nowork">休息</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="work">工作</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="nowork">休息</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="work">工作</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="nowork">休息</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="work">工作</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="nowork">休息</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="work">工作</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="nowork">休息</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="work">工作</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="nowork">休息</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="work">工作</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="nowork">休息</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="work">工作</span>
						</li>
						<li>
							<p>粤A3456344</p>
							<span class="nowork">休息</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="infoRight fr">
				<div class="rightWp">
					<div class="carIntro">
						<div class="introBox fl">
							<div class="carImg fl">
								<img src="/nctj/images/car.jpg">
							</div>
							<div class="carText fl clearfix">
								<p>车辆类型：大车</p>
								<p>本周工作时长：34.45小时</p>
								<p>车牌号码：粤A3456344</p>
								<p>统计时段：2018-1-12至2018-2-13</p>
								<p>可载容量：20.0方</p>
								<p>当前状态：<span class="color-green">工作</span></p>
							</div>
						</div>
						<div class="driver fr">
							<div class="photo">
								<img src="/nctj/images/photo.jpg">
							</div>
							<p>司机：李思林</p>
						</div>
					</div>
					<div class="timetable">
						<div class="topTool">
							<div class="tableExplain fl">
								<div class="itemExplain fl">
									<span class="bg-green"></span>
									<p>司机工作时间</p>
								</div>
								<div class="itemExplain fl">
									<span class="bg-blue"></span>
									<p>标准白晚班时间</p>
								</div>
							</div>
							<div class="topBtns fr">
								<a href="javascript:;" class="prevWeek">上一周</a>
								<a href="javascript:;" class="nextWeek">下一周</a>
							</div>
						</div>
						<div class="tiemWp">
							<div class="timeInner">
								<div class="weekList">
									<div class="weekItem">
										<div class="space1"></div>
										<p>星期一</p>
									</div>
									<div class="weekItem">
										<div class="space1"></div>
										<p>星期二</p>
									</div>
									<div class="weekItem">
										<div class="space1"></div>
										<p>星期三</p>
									</div>
									<div class="weekItem">
										<div class="space1"></div>
										<p>星期四</p>
									</div>
									<div class="weekItem">
										<div class="space1"></div>
										<p>星期五</p>
									</div>
									<div class="weekItem">
										<div class="space1"></div>
										<p>星期六</p>
									</div>
									<div class="weekItem">
										<div class="space1"></div>
										<p>星期天</p>
									</div>
								</div>
								<div class="timeBox">
									<div class="dataContainer">
										<div class="dataBox">
											<div class="space1"></div>
											<div class="workTime"></div>
											<div class="space2"></div>
											<div class="standard"></div>
											<div class="space3"></div>
										</div>
										<div class="dataBox">
											<div class="space1"></div>
											<div class="workTime"></div>
											<div class="space2"></div>
											<div class="standard"></div>
											<div class="space3"></div>
										</div>
										<div class="dataBox">
											<div class="space1"></div>
											<div class="workTime"></div>
											<div class="space2"></div>
											<div class="standard"></div>
											<div class="space3"></div>
										</div>
										<div class="dataBox">
											<div class="space1"></div>
											<div class="workTime"></div>
											<div class="space2"></div>
											<div class="standard"></div>
											<div class="space3"></div>
										</div>
										<div class="dataBox">
											<div class="space1"></div>
											<div class="workTime"></div>
											<div class="space2"></div>
											<div class="standard"></div>
											<div class="space3"></div>
										</div>
										<div class="dataBox">
											<div class="space1"></div>
											<div class="workTime"></div>
											<div class="space2"></div>
											<div class="standard"></div>
											<div class="space3"></div>
										</div>
										<div class="dataBox">
											<div class="space1"></div>
											<div class="workTime"></div>
											<div class="space2"></div>
											<div class="standard"></div>
											<div class="space3"></div>
										</div>
									</div>
									<div class="timeLine line1"><span>0:00</span></div>
									<div class="timeLine line2"><span>3:00</span></div>
									<div class="timeLine line3"><span>6:00</span></div>
									<div class="timeLine line4"><span>9:00</span></div>
									<div class="timeLine line5"><span>12:00</span></div>
									<div class="timeLine line6"><span>15:00</span></div>
									<div class="timeLine line7"><span>18:00</span></div>
									<div class="timeLine line8"><span>21:00</span></div>
									<div class="timeLine line9"><span>24:00</span></div>
								</div>
							</div>
							<div class="totalTable">
								<div class="totalTit">
									<span>总用时/天</span>
									<span>总单数/天</span>
								</div>
								<div class="totalData">
									<div class="totalItem">
										<div class="space1"></div>
										<div class="tatleWp">
											<span>0.00</span>
											<span>0</span>
										</div>
										<div class="totalBar"></div>
									</div>
									<div class="totalItem">
										<div class="space1"></div>
										<div class="tatleWp">
											<span>0.00</span>
											<span>0</span>
										</div>
										<div class="totalBar"></div>
									</div>
									<div class="totalItem">
										<div class="space1"></div>
										<div class="tatleWp">
											<span>0.00</span>
											<span>0</span>
										</div>
										<div class="totalBar"></div>
									</div>
									<div class="totalItem">
										<div class="space1"></div>
										<div class="tatleWp">
											<span>0.00</span>
											<span>0</span>
										</div>
										<div class="totalBar"></div>
									</div>
									<div class="totalItem">
										<div class="space1"></div>
										<div class="tatleWp">
											<span>0.00</span>
											<span>0</span>
										</div>
										<div class="totalBar"></div>
									</div>
									<div class="totalItem">
										<div class="space1"></div>
										<div class="tatleWp">
											<span>0.00</span>
											<span>0</span>
										</div>
										<div class="totalBar"></div>
									</div>
									<div class="totalItem">
										<div class="space1"></div>
										<div class="tatleWp">
											<span>0.00</span>
											<span>0</span>
										</div>
										<div class="totalBar"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>-->
	</div>
</div>
<canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
</body>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=b587a645756fabdc9c63a30fcc554da1"></script>
<script>
	/**
	 * 循环滚动文件状态
	 */
	var h_time;
	var h = 0;
	window.onload = function () {
		h_time = window.setInterval(h_top, 3000);
		tj();
	};

	function h_top() {
		var obj = $('.ul');
		if (h < 40) {
			h = h + 1;
			obj.css('top', -h + 'px')
			setTimeout(h_top, 30);
			return false;
		} else {
			h = 0;
			var i = $('.ul>li:nth-child(1)');
			obj.append(i);
			obj.css('top', '0px')
		}
	}
</script>
<script>
	/**
	 * 获取总数量
	 */
	$.ajax({
		url: '/product/nctj/allnum',
		type: "POST",
		success: function (data) {
			//console.log(data.data)
			$("#totalNum").attr("total", data.data)
		}
	})
	/**
	 *获取今日文件数量
	 */
	$.ajax({
		url: '/product/nctj/getnum',
		type: "POST",
		data: {time: true},
		success: function (data) {
		//	console.log(data.data)
			$("#ybzx").text(data.data.ncyb) //预报中心当天文件数
			$("#zjst").text(data.data.nczj)//浙江省台当天文件数
			$("#dhtq").text(data.data.ncdh)//东海省台当天文件数

			//计算进度条
			var zs = (Number(data.data.ncyb) + Number(data.data.nczj) + Number(data.data.ncdh))
			let ybzx = calculatePercentage(data.data.ncyb, zs);
			let zjst = calculatePercentage(data.data.nczj, zs);
			let dhtq = calculatePercentage(data.data.ncdh, zs);

			$("#ybzxt").attr("progress", ybzx + "%")//预报中心当天文件数进度条
			$("#zjstt").attr("progress", zjst + "%")//浙江省台当天文件数进度条
			$("#dhtqt").attr("progress", dhtq + "%")//东海省台当天文件数进度条

		}
	})
	/**
	 * 基本信息
	 * */
	$.ajax({
		url: '/product/nctj/getnum',
		type: "POST",
		data: {time: false},
		success: function (data) {
			$("#indicator1").attr("total", data.data.ncyb)//预报中心当天文件数进度条
			$("#indicator2").attr("total", data.data.nczj)//浙江省台当天文件数进度条
			$("#indicator3").attr("total", data.data.ncdh)//东海省台当天文件数进度条
		}
	})
	/**
	 * 获取当天上传数据
	 * @return
	 */
	$.ajax({
		url: '/product/nctj/tabledata',
		type: "POST",
		success: function (data) {
			/**
			 * 文件状态
			 * @return
			 */
			var html = "";
			for (let i = 0; i < data.data.length; i++) {
				html += "<li>\n" +
						"<div class=\"fontInner clearfix\">\n" +
						"<span>" + data.data[i].filename + "</span>\n" +
						"<span>" + timestampToDatetime(data.data[i].rktime) + "</span>\n" +
						"</div>\n" +
						"</li>"
			}
			$("#tabledata").html(html)

			/**
			 * 级别
			 * @return
			 */
			var l0 = 0
			var l1 = 0
			var l2 = 0
			var l3 = 0
			var l4 = 0
			var l5 = 0
			for (let i = 0; i < data.data.length; i++) {
				if (data.data[i].ljb == "L0") {
					l0 = l0 + 1
				}
				if (data.data[i].ljb == "L1") {
					l1 = l1 + 1
				}
				if (data.data[i].ljb == "L2") {
					l2 = l2 + 1
				}
				if (data.data[i].ljb == "L3") {
					l3 = l3 + 1
				}
				if (data.data[i].ljb == "L4") {
					l4 = l4 + 1
				}
				if (data.data[i].ljb == "L5") {
					l5 = l5 + 1
				}
			}
			$("#l0").text(l0)
			$("#l1").text(l1)
			$("#l2").text(l2)
			$("#l3").text(l3)
			$("#l4").text(l4)
			$("#l5").text(l5)
			/**
			 * 统计饼状图
			 * */
			var tj = [{name:"l0",value:l0},{name:"l1",value:l1},{name:"l2",value:l2},{name:"l3",value:l3},{name:"l4",value:l4},{name:"l5",value:l5}]
			var chartDom = document.getElementById('mytj');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
				title: {
					text: '',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data:tj,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};

			option && myChart.setOption(option);
		}
	})


	/**
	 * 计算百分比
	 * @param numerator
	 * @param denominator
	 * @returns {string}
	 */
	function calculatePercentage(numerator, denominator) {
		return (100 * numerator / denominator).toFixed(2); //保留两位小数并返回结果
	}

	/**
	 *时间戳转年月入
	 * @param timestamp
	 * @returns {string}
	 */
	function timestampToDatetime(timestamp) {
		let date = new Date(timestamp);
		let year = date.getFullYear();
		let month = ("0" + (date.getMonth() + 1)).slice(-2);
		let day = ("0" + date.getDate()).slice(-2);
		let hours = ("0" + date.getHours()).slice(-2);
		let minutes = ("0" + date.getMinutes()).slice(-2);
		let seconds = ("0" + date.getSeconds()).slice(-2);

		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	}
</script>
<style>
	.billState .StateBox span:nth-child(1) {
		width: 69% !important;
	}

</style>
</html>
